<%-- 
    Document   : Maps
    Created on : Apr 24, 2009, 3:53:51 PM
    Author     : Owner
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Georgia Tech Maps</title>
    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=ABQIAAAAQ0jROBlLdpTuRph1X-ANORQih3z3K8AROcFz588-xbuoAJqkxxR8F6TZZS2iIaeSTVPrJGnVdcr98w"
        type="text/javascript">
    </script>

    <script type="text/javascript">

    var marker;
    var map;

    function initialize() {
        if (GBrowserIsCompatible()) {
            map = new GMap2(document.getElementById("map_canvas"));
            map.setCenter(new GLatLng(10.003835, -84.068069), 8);
            //lat="47.608940" lng="-122.340141"
            //map.setCenter(new GLatLng(47.608940, -122.340141), 12);
            map.setUIToDefault();

            GEvent.addListener(map, 'click',
            function(overlay, point){
                if (point) {
                    // hide existing points
                    //map.clearOverlays();

                    //            // Create our "tiny" marker icon
                    //            var blueIcon = new GIcon(G_DEFAULT_ICON);
                    //            blueIcon.image = "http://www.google.com/intl/en_us/mapfiles/ms/micons/blue-dot.png";
                    //
                    //            // Set up our GMarkerOptions object
                    //            markerOptions = { icon:blueIcon };
                    //
                    //Add a new marker
                    marker = createMarker(point);
                    map.addOverlay(marker);
                    // center to the new point
                    map.panTo(point);
                }
            });
            loadData();
            //        GEvent.addListener(map, "moveend", function() {
            //            map.clearOverlays();
            //            var center = map.getCenter();
            //            addMarkers(map);
            //            document.getElementById("message").innerHTML = center.toString();
            //        });
        }
    }


//
//    function addMarkers(map){
//        // Add 10 markers to the map at random locations
//        var bounds = map.getBounds();
//        var southWest = bounds.getSouthWest();
//        var northEast = bounds.getNorthEast();
//        var lngSpan = northEast.lng() - southWest.lng();
//        var latSpan = northEast.lat() - southWest.lat();
//
//        for (var i = 0; i < 10; i++) {
//            var point = new GLatLng(southWest.lat() + latSpan * Math.random(),
//                southWest.lng() + lngSpan * Math.random());
//            map.addOverlay(new GMarker(point));
//        }
//    }

    function loadData(){
//        GDownloadUrl("LoadMarkers.aspx", function(data) {
//            var xml = GXml.parse(data);

//            var markers = xml.documentElement.getElementsByTagName("marker");
//           for (var i = 0; i < markers.length; i++) {
//                var name = markers[i].getAttribute("Name");
//                var address = markers[i].getAttribute("Address");
//                var type = markers[i].getAttribute("Type");
//                var point = new GLatLng(parseFloat(markers[i].getAttribute("Lat")),
//                parseFloat(markers[i].getAttribute("Lng")));
//                //var marker = createMarker(point, name, address, type);
//                var mymarker = createMarker(point);
//                map.addOverlay(mymarker);
//            }
//        });
        var request = GXmlHttp.create();
        request.open("GET", "Locations.xml", true);
        request.onreadystatechange = function(){
            if (request.readyState == 4){

                var xml = GXml.parse(request.responseText);

                var markers = xml.documentElement.getElementsByTagName("marker");

                for (var i = 0; i < markers.length; i++) {
                    var name = markers[i].getAttribute("Name");
                    var address = markers[i].getAttribute("Address");
                    var type = markers[i].getAttribute("Type");
                    var point = new GLatLng(parseFloat(markers[i].getAttribute("Lat")),
                                            parseFloat(markers[i].getAttribute("Lng")));
                    var mymarker = createMarker(point);
                    map.addOverlay(mymarker);
                }
            }
        }
        request.send(null);
    }

    function createMarker(point){
        var tmpMarker;

        tmpMarker = new GMarker(point, {draggable:true});

        GEvent.addListener(tmpMarker, "click", function() {
            var html = "<table>" +
            "<tr><td colspan='2'><b>Basic Information</b></td></tr>" +
            "<tr><td>Name:</td> <td><input type='text' id='name'/> </td> </tr>" +
            "<tr><td>Address:</td> <td><input type='text' id='address'/></td> </tr>" +
            "<tr><td colspan='2'>Location: " + tmpMarker.getLatLng().toString() + "</td> </tr>" +
            "<tr><td>Type:</td> <td><select id='type'>" +
            "<option value='Port' SELECTED>Port</option>" +
            "<option value='Ship'>Ship</option>" +
            "</select> </td></tr>" +
            "<tr><td></td><td><input type='button' value='Save & Close' onclick='saveData()'/></td></tr>";

            tmpMarker.openInfoWindow(html);
        });

        return tmpMarker;
    }

    function drawRoute(from, to){

        var polyline = new GPolyline([
                new GLatLng(37.4419, -122.1419),
                new GLatLng(37.4519, -122.1519)
            ], "#ff0000", 10);

        map.addOverlay(polyline);
    }

    function saveData() {
        var name = escape(document.getElementById("name").value);
        var address = escape(document.getElementById("address").value);
        var type = document.getElementById("type").value;
        var latlng = marker.getLatLng();
        var lat = latlng.lat();
        var lng = latlng.lng();

        var url = "ProcessRequest.jsp?name=" + name + "&address=" + address +
            "&type=" + type + "&lat=" + lat + "&lng=" + lng;

        //marker.closeInfoWindow();
        GDownloadUrl(url, function(data, responseCode) {
            //if (responseCode == 200 && data.length <= 1) {
            if(responseCode == 200){
                marker.closeInfoWindow();
                document.getElementById("message").innerHTML = "Location added.";
            }
        });
    }
    </script>

    </head>
    <body onload="initialize()" onunload="GUnload()">
        <table align="center">
            <tr>
                <td>
                    <div id="map_canvas" style="width: 800px; height: 600px"></div>
                    <div id="message"></div>
                </td>
            </tr>
        </table>

    </body>
</html>
